<template>
  <div>
      <h2>{{ state.title }}</h2>
      <h3 :class=" state.count > 5 ? 'red' : ''">{{ state.count }}</h3>
      <button @click="increment">+1</button>
  </div>
  <ul>
    <li v-for="(item,index) in state.arr">{{ item }}</li>
  </ul>
</template>

<script setup>

import { reactive } from 'vue';

let state = reactive({
  title: 'Hello Vue 3',
  count: 0,
  isActive:false,
  arr:['a','b','c']
})
const increment = () => {
  state.count++
  if (state.count > 5) {
    state.isActive = true;
  }else{
    state.isActive = false;
  }
}
</script>

<style scoped>
.red{color: red;}
</style>